<template v-slot:default>
  <div :class="['content', isCollapse ? 'menu--fold' : 'menu--unfold']">
    <!-- 侧边菜单栏 -->
    <div class="menuLeft">
      <div class="menu-nav-header">
      
        <span><img src="..\assets\images\飞机图标.png" style="width: 35px;float: left;
    margin: 8px 0 0 23px;">{{ isCollapse ? "控制台" : "管理控制台" }}</span>
      </div>
      <!--todo 菜单栏组件 -->
      <!-- background-color="#263238" -->
      <el-menu
          active-text-color="#fff"
          background-color="#f1f1e2"
          class="el-menu-vertical-demo"
          :collapse-transition="false"
          default-active="2"
          text-color="#96a4ab "
          @open="handleOpen"
          @close="handleClose"
          :collapse="isCollapse"
      >
        <el-menu-item index="1" @click="$router.push({ name: 'index' })">
          <el-icon><HomeFilled /></el-icon>
          <span>&nbsp;&nbsp;首页</span>
        </el-menu-item>

        <el-menu index="1">
          <el-sub-menu index="2">
            <template #title>
              <el-icon><Promotion /></el-icon>
              <span>&nbsp;&nbsp;航班管理 </span>
            </template>
            <el-sub-menu index="2-1">
              <template #title>
                <el-icon><BottomLeft /></el-icon>
                <span>&nbsp;&nbsp;国际/国内到港</span>
              </template>
              <el-menu-item
                  index="2-1-1"
                  @click="$router.push({ name: 'Aairnonstop' })"
              >
                <span>&nbsp;&nbsp;到港直达航班</span>
              </el-menu-item>
              <el-menu-item
                  index="2-1-2"
                  @click="$router.push({ name: 'Aairtransit' })"
              >
                <span>&nbsp;&nbsp;到港中转航班</span>
              </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="2-2">
              <template #title>
                <el-icon><TopRight /></el-icon>
                <span>&nbsp;&nbsp;国际/国内离港</span>
              </template>
              <el-menu-item
                  index="2-2-1"
                  @click="$router.push({ name: 'Dairnonstop' })"
              >
                <span>&nbsp;&nbsp;离港直达航班</span>
              </el-menu-item>
              <el-menu-item
                  index="2-2-2"
                  @click="$router.push({ name: 'Dairtransit' })"
              >
                <span>&nbsp;&nbsp;离港中转航班</span>
              </el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
        </el-menu>

        <el-sub-menu index="3">
          <template #title>
            <el-icon><LocationFilled /></el-icon>
            <span>&nbsp;&nbsp;机场管理</span>
          </template>
          <el-menu-item index="1-1" @click="$router.push({ name: 'luggage' })">
            <el-icon><Briefcase /></el-icon>
            <span>&nbsp;&nbsp;行李管理</span>
          </el-menu-item>
          <el-menu-item
              index="1-2"
              @click="$router.push({ name: 'airportOpen' })"
          >
            <el-icon><Unlock /></el-icon>
            <span>&nbsp;&nbsp;机场是否开启</span>
          </el-menu-item>
        </el-sub-menu>

        <el-menu index="4" v-if="isAuditorAndMangement">
          <el-sub-menu index="2">
            <template #title>
              <el-icon><Promotion /></el-icon>
              <span>&nbsp;&nbsp;审核管理</span>
            </template>
            <el-sub-menu index="2-1">
              <template #title>
                <el-icon><BottomLeft /></el-icon>
                <span>&nbsp;&nbsp;到港航班审核</span>
              </template>
              <el-menu-item
                  index="2-1-1"
                  @click="$router.push({ name: 'AairnonstopCheck' })"
              >
                <span>&nbsp;&nbsp;到港直达审核</span>
              </el-menu-item>
              <el-menu-item
                  index="2-1-2"
                  @click="$router.push({ name: 'AairtransitCheck' })"
              >
                <span>&nbsp;&nbsp;到港中转审核</span>
              </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="2-2">
              <template #title>
                <el-icon><TopRight /></el-icon>
                <span>&nbsp;&nbsp;离港航班审核</span>
              </template>
              <el-menu-item
                  index="2-2-1"
                  @click="$router.push({ name: 'DairnonstopCheck' })"
              >
                <span>&nbsp;&nbsp;离港直达审核</span>
              </el-menu-item>
              <el-menu-item
                  index="2-2-2"
                  @click="$router.push({ name: 'DairtransitCheck' })"
              >
                <span>&nbsp;&nbsp;离港中转审核</span>
              </el-menu-item>
            </el-sub-menu>
            <el-menu-item
                index="2-3"
                @click="$router.push({ name: 'check' })"
                v-if="isAuditor"
            >
              <el-icon><Briefcase /></el-icon>
              <span>&nbsp;&nbsp;审核</span>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>

        <el-sub-menu index="6" v-if="isAdmin">
          <template #title>
            <el-icon><UserFilled /></el-icon>
            <span>&nbsp;&nbsp;用户管理</span>
          </template>
          <el-menu-item index="3-1" @click="$router.push({ name: 'user' })">
            <el-icon><User /></el-icon>
            <span>&nbsp;&nbsp;用户</span>
          </el-menu-item>
          <el-menu-item index="3-2" @click="$router.push({ name: 'role' })">
            <el-icon><CreditCard /></el-icon>
            <span>&nbsp;&nbsp;用户角色</span>
          </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="7" v-if="isAdmin">
          <template #title>
            <el-icon><Management /></el-icon>
            <span>&nbsp;&nbsp;权限管理</span>
          </template>
          <el-menu-item index="3" @click="$router.push({ name: 'permission' })">
            <el-icon><Medal /></el-icon>
            <span class="icon-text">&nbsp;&nbsp;权限</span>
          </el-menu-item>
        </el-sub-menu>

        <el-menu-item index="5"  v-if="isAuditorAndMangement" @click="$router.push({ name: 'information' })">
          <el-icon><Tools /></el-icon>
          <span>&nbsp;&nbsp;信息统计</span>
        </el-menu-item>

        <el-menu-item index="6"  v-if="isAuditorAndMangement" @click="$router.push({ name: 'chinaMap' })">
          <el-icon><Tools /></el-icon>
          <span>&nbsp;&nbsp;航班路线</span>
        </el-menu-item>

        <!-- <el-menu-item index="7" @click="$router.push({ name: 'set' })">
          <el-icon><Tools /> </el-icon>
          <span>&nbsp;&nbsp;设置</span>
        </el-menu-item> -->
      </el-menu>
    </div>
    <!-- 右边内容 -->
    <div class="content-main">
      <div class="navTop horizontalView">
        <div class="nav_tools horizontalView">
          <el-icon v-if="!isCollapse" style="cursor: pointer; margin-top: 22px;" class="icon"
          ><Fold @click="isCollapse = !isCollapse"
          /></el-icon>
          <el-icon v-else style="cursor: pointer;" class="icon"
          ><Expand @click="isCollapse = !isCollapse"
          /></el-icon>

          <div class="userinfo">
            <!-- 头像框 -->
            <el-avatar :size="70" :src="circleUrl" style="float: left; margin-top: -8px;" @click="userimg"/>
            <span id="username" style="line-height: 50px; padding-left: 10px;">{{ userinfo }}&nbsp;&nbsp;</span>
            <el-button type="info" @click="logout"  class="logout-bg">退出登录</el-button>
          </div>
        </div>
      </div>
      <!-- todo 内容组件 -->
      <!--      <router-view/>-->
      <el-tabs
          v-if="$route.meta.isTab"
          v-model="mainTabsActiveName"
          :closable="true"
          @tab-click="selectedTabHandle"
          @tab-remove="removeTabHandle"
      >
        <el-scrollbar
            ref="scroll"
            :height="siteContentViewHeight + 32 + 'px'"
            @scroll="scroll"
        >
          <el-tab-pane
              v-for="item in mainTabs"
              :label="item.title"
              :name="item.name"
              :key="item.name"
          >
            <el-card :style="'min-height:' + siteContentViewHeight + 'px'">
              <router-view v-if="item.name === mainTabsActiveName" />
            </el-card>
          </el-tab-pane>
        </el-scrollbar>
      </el-tabs>
      <div v-else>
        <el-scrollbar
            ref="scroll"
            :height="siteContentViewHeight + 32 + 'px'"
            @scroll="scroll"
        >
          <!-- 主入口标签页 e -->
          <el-card :style="'min-height:' + siteContentViewHeight + 'px'">
            <router-view />
          </el-card>
        </el-scrollbar>
      </div>
    </div>

    <!-- 点击头像弹出组件 -->
    <el-dialog v-model="dialogVisible" width="70%">
      <h2 style="text-align: center">个人中心</h2>
      <form id="rephotoForm">
        <input type="file" name="userPhoto" id="userPhoto" accept="image/png,image/gif,image/jpeg,image/jpg"/>
        <input type="hidden" name="id" id="id" value="0"/>
      </form>
      <el-button @click="updateImg">修改头像</el-button>

      <el-form
          :model="user"
          label-width="120px"
          :size="formSize"
          id="editForm"
          :rules="rules"
          ref="ediForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="users.username" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="users.password" type="password"/>
        </el-form-item>
        <el-form-item label="确认密码" prop="repassword">
          <el-input v-model="users.repassword" type="password"/>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="users.phone" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-input v-model="users.sex" />
        </el-form-item>
        <el-form-item label="组别" prop="remark">
          <el-input v-model="users.remark" disabled/>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="accept"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>


</template>

<script>
import { mapGetters } from "vuex";
import $ from 'jquery';
import { ElMessage, ElMessageBox } from "element-plus";
// import { id } from "element-plus/es/locale";
export default {
  computed: {
    ...mapGetters([
      "isAdmin",
      "isManagenment",
      "isAuditor",
      "isAuditorAndMangement",
    ]),
  },
  data() {
    return {
      dialogVisible: false,
      dialogTransferVisible: false,
      // changeImg:'',

      isCollapse: false,
      mainTabs: [],
      mainTabsActiveName: "",
      menuActiveName: "",
      menus: [],
      userinfo: sessionStorage.getItem("username"),
      circleUrl: sessionStorage.getItem("userimg"),
      users: {
        id: "",
        username: "",
        password: "",
        repassword: "",
        phone: "",
        sex: "",
        remark: ""
      }
    };
  },
  created() {
    let that = this;
    that.routeHandle(that.$route);
  },
  // 监听路由变化
  watch: {
    $route: {
      handler(to, from) {
        if (to.path != from.path) {
          // 处理路由
          this.routeHandle(to);
        }
      },
    },
  },
  methods: {
    logout() {
      this.$axios
          .post("http://localhost:8888/users/logout")
          .then((response) => {
            if (response.data.status === 10000) {
              this.$message({
                message: "退出成功",
                type: "success",
              });
              sessionStorage.clear();
              this.$router.push("/Login");
            } else {
              this.$message.error({
                type: "error",
                message: response.data.msg,
              });
              // ElMessageBox.alert(response.data.msg, '信息')
            }
          });
      sessionStorage.clear();
      this.$router.push("/Login");
    },
    userimg() {
      this.dialogVisible=true;
      this.dialogTransferVisible = true;
      const id = sessionStorage.getItem("id");
      this.$axios
          .get("http://localhost:8888/users/v5/findUserById", { params: { id } } )
          .then((response) => {
            if(response.data.status == 10000) {
              this.users.id = response.data.data.id;
              this.users.username = response.data.data.username;
              this.users.phone = response.data.data.phone;
              this.users.remark = response.data.data.remark;
              this.users.sex = response.data.data.sex==0?"男":"女";
            }
            console.log(response.data.data);
          })
    },
    // 修改头像
    updateImg() {
      document.getElementById("id").value = sessionStorage.getItem("id")

      this.$axios({
            method : 'post',
            url : 'http://localhost:8888/file/upPhoto',
            data : new FormData($("#rephotoForm")[0]) ,
            contentType : false , // 不使用默认类型: "application/x-www-form-urlencoded"
            processData : false ,  // 不要把data数据转为String
          },
          console.log("aAAAAAAAa")
      ).then((response) => {
        if(response.data.errorCode.localeCompare('200')==0) {
          sessionStorage.setItem("userimg", response.data.data);
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.circleUrl = response.data.data;
          this.dialogVisible = false;
          this.dialogTransferVisible = false;
        } else {
          this.$message({
            message: "修改失败",
            type: "danger",
          });
        }
        console.log("ssssss"+response.data.errorCode.localeCompare('200'))
        console.log(response.data)
      })
    },
    cancel() {
      this.dialogVisible = false;
      this.dialogTransferVisible = false;
      this.users.password = "";
      this.users.repassword = "";
    },
    accept() {
      if (this.users.password.localeCompare(this.users.repassword)==0 && this.users.password != null && this.users.password != ""){
        this.$axios
            .post("http://localhost:8888/users/updateUserById",this.users)
            .then((response) => {
              console.log(response.data);
            })
        this.dialogVisible = false;
        this.dialogTransferVisible = false;
      } else if (this.users.password.localeCompare(this.users.repassword) != 0) {
        this.$message({
          message: "请检查输入的两次密码是否一致！",
          type: "warning",
        });
      } else {
        this.$message({
          message: "未进行修改无法提交！",
          type: "error",
        });
      }
      this.users.password = "";
      this.users.repassword = "";

    },
    resetDocumentClientHeight: function () {
      this.documentClientHeight = document.documentElement["clientHeight"];
      window.onresize = () => {
        this.documentClientHeight = document.documentElement["clientHeight"];
        this.loadSiteContentViewHeight();
      };
    },
    loadSiteContentViewHeight: function () {
      let height = this.documentClientHeight - 52; //减去导航栏高度50
      if (this.$route.meta.isTab) {
        height -= 70; //减去tab栏高度40,减去上下边距30
        /* this.siteContentViewHeight = {
          'min-height': height + 'px'
        }; */
        this.siteContentViewHeight = height;
      } else {
        height -= 30;
        //给内容区设置高度
        this.siteContentViewHeight = height;
      }
    },
    routeHandle: function (route) {
      //每次切换页面，重新计算页面高度和内容区高度
      this.resetDocumentClientHeight();
      this.loadSiteContentViewHeight();
      if (route.meta.isTab) {
        // tab选中, 不存在先添加
        var tab = this.mainTabs.filter((item) => item.name === route.name)[0];
        if (!tab) {
          if (route.meta.isDynamic) {
            route = this.dynamicMenuRoutes.filter(
                (item) => item.name === route.name
            )[0];
            if (!route) {
              return console.error("未能找到可用标签页!");
            }
          }
          tab = {
            menuId: route.meta.menuId || route.name,
            name: route.name,
            title: route.meta.title,
            iframeUrl: route.meta.iframeUrl || "",
            params: route.params,
            query: route.query,
          };
          this.mainTabs = this.mainTabs.concat(tab);
        }
        this.menuActiveName = tab.menuId + "";
        this.mainTabsActiveName = tab.name;
      }
    },
    selectedTabHandle: function (tab, e) {
      tab = this.mainTabs.filter((item) => item.name === tab.paneName);
      if (tab.length >= 1) {
        this.$router.push({
          name: tab[0].name,
          query: tab[0].query,
          params: tab[0].params,
        });
      }
    },
    removeTabHandle: function (tabName) {
      this.mainTabs = this.mainTabs.filter((item) => item.name !== tabName);
      if (this.mainTabs.length >= 1) {
        // 当前选中tab被删除
        if (tabName === this.mainTabsActiveName) {
          var tab = this.mainTabs[this.mainTabs.length - 1];
          this.$router.push(
              {
                name: tab.name,
                query: tab.query,
                params: tab.params,
              },
              () => {
                this.mainTabsActiveName = this.$route.name;
              }
          );
        }
      } else {
        this.menuActiveName = "";
        this.$router.push({
          name: "Home",
        });
      }
    },
    mounted: function () {
      let that = this;
      that.resetDocumentClientHeight();
      that.loadSiteContentViewHeight();
    },
  },
};
</script>

<style>
@import url("../assets/css/home.css");
.logout-bg {
  background-color: #e72222b0 !important;
}
.logout-bg:hover {
  background-color: red !important;
}
</style>



